<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端展示 | 法律法规信息预测系统</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="{{url_for('static', filename='css/index.css')}}" type="text/css" media="all">
  <script src="{{url_for('static', filename='js/jquery-3.4.1.js')}}"></script>
  <script src="{{url_for('static', filename='js/index.js')}}"></script>
  <style type="text/css">
  *{
    margin:0px;
    padding: 0px;
  }
  html{
    height: 100%;
  }
  #app{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 100px;
    padding: 8px;
    width: 600px;
  }
  #app *{
    margin-bottom: 5px;
  }
  h2{
    margin-top: 10px;
    position: relative;
    /* border-bottom: 1px solid grey; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
  }
  h2::before {
        content: '';
        position: absolute;
        left: 0;
        height: 2px;
        bottom: 0;
        width: 100%;
        background: linear-gradient(to right,rgb(128, 241, 249), #1abcb4, #03c7c7, #0aadee,rgb(128, 241, 249));
        transform: translateX(-100%);
        transition: 2s;
    }
    h2:hover::before {
        transform: translateX(100%);
    }
    .model{
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 2px;
    }
    .predict{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .TopnavAndBanner {
      display: flex;
      color: honeydew;
      align-items: center;
      width: 100%;
      flex-direction: column;
      background: linear-gradient(234deg, rgb(128, 241, 249) 0%, rgb(90, 181, 241) 53%, rgb(6, 128, 145) 100%);
      clip-path: ellipse(80% 60% at 50% 40%);
}

  </style>
</head>
<body>
  <div class="TopnavAndBanner">
    <h2>前端展示 | 法律法规信息预测系统</h2>
    <div id="app">
      <el-form   label-width="80px" method="post" class="basic-grey">
        <div class="model">分类模型选择：
          <!-- <label for="Tfidf"><el-radio v-model="radio"  id="Tfidf" name="model"  label="1">Tfidf模型</el-radio></label>
          <label for="LSTM"><el-radio v-model="radio"  id="LSTM" name="model" label="2">LSTM模型</el-radio></label>
          <label for="CNN"><el-radio v-model="radio" id="CNN" name="model" label="3">TextCNN模型</el-radio></label>  -->
          <label for="Tfidf"><input type="radio" id="Tfidf" name="model" checked value="1">Tfidf 模型</label>
          <label for="LSTM"><input type="radio" id="LSTM" name="model" value="2">LSTM 模型</label>
          <label for="CNN"><input type="radio" id="CNN" name="model" value="3">TextCNN 模型</label> 
        </div>
        <label>
            <el-input type="textarea" label-width="100px" id="content" v-model="title" placeholder="请输入法律法规"></el-input>
        </label>
        <label class="predict">
            <span>预测所属范围:</span>
            <span id="predictType"></span>
            <span>&nbsp;</span>
            <el-button :plain="true" @click="open" round id="predict" >预测</el-button>
        </label>
      </el-form>
    </div>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
    el: '#app',
    data: function() {
      return { 
        // radio:'1',
        title:''
      }
    },
    methods: {
      open() {
        this.$message('开始预测，请稍等');
      }
    }
  })
</script>
</html>